<template>
    <view class="setting-wrapper">
        <view class="setting common-flex-between common-interval">
            <text class="title">
                版本信息
            </text>
            <text class="content">
                V{{version}}
            </text>
        </view>
        <view class="setting common-flex-between common-interval">
            <text class="title">
                更换手机号
            </text>
            <text class="content" @tap="changePhone">
                <text class="phone">{{phoneNum}}</text>
                <text class="icon-arrow-right icon-btn"/>
            </text>
        </view>
        <view class="setting last common-flex-between common-interval">
            <text class="title">
                退出登录
            </text>
            <text class="content" @tap="loginOut">
                <text class="login-out">退出</text>
            </text>
        </view>
        <gwShowModal
                v-model="showModal"
                type="tips"
                width="550rpx"
                height="260rpx"
                @confirm="confirmHandle"
                tipsContent="确认退出"/>
    </view>
</template>

<script>
    import { mapGetters } from 'vuex';
    import { getConfInfo, loginOut } from "@/util/commonFn";
    import gwShowModal from '@/pages/components/gw-show-modal'
    export default {
        name: "index",
        computed: {
            ...mapGetters(['phoneNum'])
        },
        components: {
            gwShowModal
        },
        data(){
            return{
                version: '',
                showModal: false
            }
        },
        methods: {
            changePhone(){
                uni.navigateTo({
                    url: './old-phone'
                })
            },
            confirmHandle(){
                this.showModal = false;
                loginOut();
                uni.navigateBack(-1);
            },
            loginOut(){
                this.showModal = true;
            }
        },
        mounted(){
            getConfInfo().then(res => {
               this.version = res.version
            })
        }
    }
</script>

<style scoped lang="scss">
    .setting-wrapper{
        min-height: 100%;
        background: #F9F9F9;
        align-items: center;
        padding-top: 20rpx;
        .setting{
            height: 100rpx;
            background: #FFFFFF;
            border-bottom: 1rpx solid #E5E5E5;
            line-height: 100rpx;
            &.last{
                border-bottom: none;
            }
        }
        .title{
            font-size: 32rpx;
        }
        .content{
            color: #999999;
            .phone{
                color: #2BA8FC;
                margin-right: 17rpx;
            }
            .login-out{
                color: #2BA8FC;
            }
        }
    }
</style>